/**
 * 出发站选择
 * @email 626097912@qq.com
 * Created by dength on 2017/04/18
 * 
 * 待处理问题：textinput样式问题，待解决
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    TextInput,
    ListView,
    Alert
} from 'react-native';
import BaseComponent from '../base/baseComponent';
import Constants from '../base/constants';
import CommonStyles from '../base/commonStyles';
import Buttom from '../common/Buttom';
import { getNavigator } from '../route/route';
import Toast from '@remobile/react-native-toast';
import store from 'react-native-simple-store';
var dismissKeyboard = require('dismissKeyboard');

var THUMB_URLS = [
    [{ key: 0, City: '北京' }, { key: 1, City: '上海' }, { key: 2, City: '杭州' }, { key: 3, City: '广州' },],
    [{ key: 4, City: '南京' }, { key: 5, City: '成都' }, { key: 6, City: '西安' }, { key: 7, City: '郑州' },],
    [{ key: 8, City: '重庆' }, { key: 9, City: '合肥' }, { key: 10, City: '汉口' }, { key: 11, City: '武汉' },],
    [{ key: 12, City: '长沙' }, { key: 3, City: '武昌' }, { key: 14, City: '太原' }, { key: 15, City: '苏州' },],
    [{ key: 16, City: '厦门' }, { key: 17, City: '南昌' }, { key: 18, City: '沈阳' }, { key: 19, City: '深圳' },],
]

class DepartureStation extends BaseComponent {
    constructor(props) {
        super(props);
        this.state = {
            Thefirst: '',
            End: '',
        }
        var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        this.state = {
            dataSource: ds.cloneWithRows(THUMB_URLS),
        };
    }

    getNavigationBarProps() {
        return {
            title: '出发站',
            leftButtonImage: require('../images/ic_return.png'),
            hideRightButton: true,
        };
    }
    //提交数据并且跳转
    _submits() {
        let {Thefirst, End} = this.state;
        if (Thefirst === undefined || End === undefined) {
            Toast.show('请输入出发地或目的地');
            return;
        }
        else {
            dismissKeyboard();//关闭键盘调用
            store.update('TrainIndex', {
                Thefirst: Thefirst,
                End: End
            }).then(() => {
                getNavigator().push({
                    name: 'GrabTicket',
                });
            })
        }
    }

    //为地址框赋值
    _clickSelect(City) {
        let { Thefirst, End} = this.state;
        if (Thefirst === '' || Thefirst === undefined) {
            this.setState({
                Thefirst: City
            });
            return;
        }
        if (End === '' || End === undefined) {
            this.setState({
                End: City
            });
            return;
        }
    }

    _renderRow = (rowData, key) => {
        const {City} = rowData;
        return (
            <View style={styles.hotCity_li}>
                <View style={styles.hotCity_li_b}>
                    <TouchableOpacity
                        key={`${rowData[0].City}-${key}`}
                        onPress={() => this._clickSelect(rowData[0].City)}
                        activeOpacity={0.8}
                        >
                        <Text style={styles.hotCity_li_text}>{rowData[0].City}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        key={`${rowData[1].City}-${key}`}
                        onPress={() => this._clickSelect(rowData[1].City)}
                        activeOpacity={0.8}
                        >
                        <Text style={styles.hotCity_li_text}>{rowData[1].City}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        key={`${rowData[2].City}-${key}`}
                        onPress={() => this._clickSelect(rowData[2].City)}
                        activeOpacity={0.8}
                        >
                        <Text style={styles.hotCity_li_text}>{rowData[2].City}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        key={`${rowData[3].City}-${key}`}
                        onPress={() => this._clickSelect(rowData[3].City)}
                        activeOpacity={0.8}
                        >
                        <Text style={styles.hotCity_li_text}>{rowData[3].City}</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }

    renderBody() {
        let { Thefirst, End} = this.state;
        return (
            <View style={styles.container}>
                <View style={[{ height: 64, }, styles.topbox]}>
                    <View style={[styles.topbox_li, { flexDirection: 'row', }]}>
                        <View style={styles.inputbox}>
                            <TextInput
                                style={styles.inputbox_li}
                                placeholder="请输入"
                                placeholderTextColor="#FF6600"
                                underlineColorAndroid="transparent"
                                maxLength={10}
                                numberOfLines={1}
                                defaultValue={Thefirst}
                                clearButtonMode={'while-editing'}// 输入框右边 x 按钮
                                clearTextOnFocus={true} // 再次输入清空之前内容
                                onChangeText={(text) => { this.setState({ Thefirst: text }) } }
                                />
                            {/*<TouchableOpacity
                                activeOpacity={0.8}
                                onPress={() => this.setState({ Thefirst: '' })}
                                style={{ position: 'absolute', right: 5, top: 8 }}
                                >
                                <Image style={{ width: 16, height: 16 }} source={require('../images/ic_departureStation_x.png')} />
                            </TouchableOpacity>*/}
                        </View>
                        <View style={styles.inputbox}>
                            <TextInput
                                style={styles.inputbox_li}
                                placeholder="请输入"
                                placeholderTextColor="#FF6600"
                                underlineColorAndroid="transparent"
                                maxLength={10}
                                numberOfLines={1}
                                defaultValue={End}
                                clearButtonMode={'while-editing'}// 输入框右边 x 按钮
                                clearTextOnFocus={true} // 再次输入清空之前内容
                                onChangeText={(text) => { this.setState({ End: text }) } }
                                />
                            {/*<TouchableOpacity
                                activeOpacity={0.8}
                                style={{ position: 'absolute', right: 5, top: 8 }}
                                >
                                <Image style={{ width: 16, height: 16 }} source={require('../images/ic_departureStation_x.png')} />
                            </TouchableOpacity>*/}
                        </View>
                        <View>
                            <Buttom
                                onPress={() => this._submits()}
                                containerStyle={styles.buttom_box}
                                style={{ fontSize: 14, color: '#FF6600' }}
                                text={'确定'}
                                />
                        </View>
                    </View>
                </View>
                <Image style={styles.line_img} source={require('../images/ic_departureStation_t.png')} />
                <View style={[{ height: 36, }, styles.topbox]}>
                    <View style={styles.topbox_li}>
                        <Text style={styles.topbox_li_text}>热门城市</Text>
                    </View>
                </View>
                <View style={styles.hotCity}>
                    <View style={[styles.topbox_li, { marginTop: 10, marginBottom: 25 }]}>

                        <ListView
                            dataSource={this.state.dataSource}
                            renderRow={this._renderRow}
                            />
                    </View>
                </View>
            </View >
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: CommonStyles.colors.background,
    },
    topbox: {
        justifyContent: 'center', backgroundColor: CommonStyles.colors.white, width: Constants.window.width
    },
    topbox_li: {
        marginLeft: 15, marginRight: 15
    },
    line_img: {
        width: Constants.window.width, height: 4
    },
    topbox_li_text: {
        fontSize: 16, color: '#555555'
    },
    buttom_box: {
        borderColor: '#FF6600', borderRadius: 5, borderWidth: 1, width: 50,
        justifyContent: 'center', alignItems: 'center', height: 37
    },
    inputbox: {
        marginRight: 5, width: (Constants.window.width - 90) / 2, height: 37,
        borderColor: '#FF6600',
        borderRadius: 5, borderWidth: 1,
    },
    inputbox_li: {
        fontSize: 12, textAlign: 'left', textAlignVertical: 'center',
        flex: 1, height: 33,
        width: ((Constants.window.width - 90) / 2) - 20
    },
    //热门城市列表
    hotCity: {
        marginTop: 10, backgroundColor: 'white', width: Constants.window.width
    },
    hotCity_li: {
        width: Constants.window.width - 30, height: 36, justifyContent: 'center'
    },
    hotCity_li_b: {
        justifyContent: 'space-between', flexDirection: 'row'
    },
    hotCity_li_text: {
        fontSize: 14, color: '#989898'
    }
});

export default DepartureStation;